<template>
	<!-- 这个可以当成一个页面的弹窗，比如产品详情的海报弹窗，以及首页的公告弹出 -->
	<div class="img-popup-wrap" v-if="list">
		<van-overlay :show="show" z-index=10 >
			<van-swipe @change="change">
				<van-swipe-item v-for="(item, index) in list" :key="index">
					<div class="img-popup-item" @click="link(index)">
						<img v-if="item.cover" v-lazy="item.cover">
						<p class="van-multi-ellipsis--l3" >{{item.summary}}</p>
						<van-button 
							type="primary" 
							plain 
							hairline 
							size="small"  
							v-if="item.content_kind!=2"
							text="查看详情"
						/>
					</div>
				</van-swipe-item>
			</van-swipe>
			<van-icon name="close" @click="close" />
		</van-overlay>
	</div>
</template>
<script>
import {
    Overlay,
    Swipe,
    SwipeItem,
    Icon,
    Button,
} from 'vant'
export default {
	name: 'img-popup',
	components: {
		[Overlay.name]: Overlay,
		[Swipe.name]: Swipe,
		[SwipeItem.name]: SwipeItem,
		[Button.name]: Button,
		[Icon.name]: Icon
	},
	props: ['list'],
	data() {
		return {
			index: 0,
			show: true,
		}
	},
	methods: {
		close() {
				this.show = false
				const ids = []
				this.list.forEach(item => {
					ids.push(item.id)
				});

				this.$emit("closePopup", {
					index: this.index,
					ids: ids
				})
		},
		link(index) {
			const item = this.list[index]
			//content_kind 0为编辑内容 、1为插入链接、 2 无链接 
			if(item.content_kind >= 0){
				if(item.content_kind == '0'){
					this.$goPage('message/bulletin', {
						id: item.message_id
					})
				}else{
					if(item.content_kind == '1'){
						window.location.href = item.link
					}
				}
			}
		},
		change (index) {
			this.index = index
		}
	}
}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.img-popup-wrap {
    /deep/ .van-swipe__track {
        position: relative;
    }
    /deep/ .van-swipe {
        width: 278px;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-53%);
        padding-bottom: 30px;
        .van-swipe__indicator {
            border-radius: 6px;
        }
    }
    
    .img-popup-item {
        padding: 5px;
        margin: 0 5px;
        background-color: @white;
        border-radius: 5px;
        width: 258px;
        height: 335px;
        overflow: hidden;
        img {
            width: 258px;
            height: 170px;
            object-fit: cover;
        }
    }

    p {
        margin: 14px 10px 0;
        font-size: 14px;
        min-height: 64px;
    }
    /deep/ .van-button {
        display: block;
        margin: 32.5px auto 20px;
        padding: 0 20px;
    }
    /deep/ .van-icon {
        position: absolute;
        left: 50%;
        top: 81%;
        transform: translateX(-50%);
        color: @white;
        font-size: 30px;
        z-index: 102;
    }
} 
</style>